<template>
  <div>
    <el-select v-model="showValue" filterable :multiple="multiple" @focus="focusClick" :style="{'width': width}">
      <div class="search-box" v-if="remote">
        <el-input v-model="keyword" size="small" :placeholder="placeholder" clearable >
          <template #append>
            <el-button @click.stop="_search">搜索</el-button>
          </template>
        </el-input>
      </div>

      <el-option v-for="(item,index) in dataList" :value="item.id" :label="item.name"  :key="index" style="margin: 5px">
        <slot v-if="slot" :item="item"></slot>
      </el-option>
    </el-select>

  </div>
</template>

<script>
export default {
  name: "select-search",
  props: {
    value: {
      type: Object,
      default: null,
    },

    localData: {
      type: Array,
      default: function () {
        return []
      }
    },
    echoData:{
      type: Array,
      default: function () {
        return []
      }
    },
    defaultProps: {
      type: Object,
      default: function () {
        return {
          value: 'id',
          label: 'name'
        }
      }
    },
    multiple: { // 是否可以多选
      type: Boolean,
      default: false
    },
    valueString: {
      type: Boolean,
      default: false
    },
    width:{
      type: String,
      default: "100%"
    },
    remote: { //服务端远程搜索
      type: Boolean,
      default: false
    },
    placeholder: { //占位提示
      type: String,
      default: '输入关键字搜索'
    },
    slot: { //插槽内容自定义显示
      type: Boolean,
      default: false
    },

  },
  data() {
    return {
      dataList: [],
      selectedList:[],
      keyword: '',
      showValue:null,
    }
  },

  mounted() {

    this.$watch(() => this.localData, () => {
      this.initData()
    }, {deep: true, immediate: true})

    this.$watch(() => this.showValue, () => {
      if (this.multiple && this.valueString){
        this.$emit('input', this.showValue.join(","))
      }else {
        this.$emit('input', this.showValue)
      }
    }, {deep: true, immediate: true})



    this.$watch(() => this.value, () => {
      this.initData()
      if (this.value){
        let valueArr =  Array.isArray(this.value)?this.value:this.value.split(",")
        if (this.multiple){
          this.showValue = valueArr;
        }else {
          this.showValue = this.value;
        }
        let selectedList = [];
        valueArr.forEach(value=>{
          let selected = this.dataList.find(o=>{return o.id ===value});
          selectedList.push(selected)
        })
        this.selectedList = selectedList;
      }
    }, {deep: true, immediate: true})



  },

  methods: {
    focusClick(){
      if (this.dataList.length<=0){
        this.keyword = "";
        this.$emit("search");
      }
    },
    initData(){
      this.dataList = [];
      this.localData.forEach(v=>{
        let newObj = {
          id: v[this.defaultProps.value],
          name: v[this.defaultProps.label],
          ...v
        }
        this.dataList.push(newObj)
      })

      this.selectedList.forEach(selected=>{
        let o = this.dataList.find(o=>{return o.id ===selected.id});
        if (!o){
          this.dataList.push(selected)
        }
      })

      this.echoData.forEach(selected=>{
        let o = this.dataList.find(o=>{return o.id ===selected.id});
        if (!o){
          this.dataList.push(selected)
        }
      })

    },

    _search(){
      this.$emit("search", this.keyword);
    },
  },

}
</script>

<style lang="scss" scoped>
.search-box {
  padding: 10px;
}


</style>
